import 'package:flutter/material.dart';
import 'package:x3_base_core/x3_base_core.dart';
import 'package:extended_image/extended_image.dart';
import 'package:x3_component_core/utils/base_image_utils.dart';

class BaseImageHeroX2Component extends StatefulWidget {
  final Animation animation;

  final String hero;

  final Color backgroundColor;

  final String imageUrl;

  final List<dynamic> imageList;

  final String placeholderImage;

  final String currentShowImageUrl;

  final BaseImageTypeEnum type;

  const BaseImageHeroX2Component({Key key, @required this.animation, @required this.hero, @required this.imageUrl, @required this.currentShowImageUrl, @required this.imageList, @required this.placeholderImage, @required this.type, this.backgroundColor}) : super(key: key);

  @override
  _BaseImageHeroX2ComponentState createState() => _BaseImageHeroX2ComponentState();
}

class _BaseImageHeroX2ComponentState extends State<BaseImageHeroX2Component> {
  List<dynamic> _imageList;

  int _currentIndex;

  @override
  void initState() {
    this._imageList = this._initImageList();
    this._currentIndex = this._imageList.indexOf(BaseImageUtils.getImageUrlBySize(widget.imageUrl, BaseImageSizeEnum.original, widget.type));
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        onTap: () => Navigator.of(context).pop(),
        child: Hero(
          tag: widget.hero,
          child: Stack(
            children: [
              AnimatedOpacity(opacity: 0.0, duration: Duration(milliseconds: 0), child: _buildHiddenImageWidget()),
              Container(width: double.infinity, height: double.infinity, color: widget.backgroundColor ?? (_getBackgroundColor() ?? Colors.transparent), child: _buildGesturePageViewWidget()),
            ],
          ),
        ));
  }

  Widget _buildHiddenImageWidget() {
    return ExtendedImage.network(widget.currentShowImageUrl, fit: BoxFit.contain, mode: ExtendedImageMode.gesture, initGestureConfigHandler: _initGestureConfigHandler);
  }

  Widget _buildGesturePageViewWidget() {
    return ExtendedImageGesturePageView.builder(
      itemBuilder: (BuildContext context, int index) {
        dynamic imageUrl = this._imageList[index];
        return _buildItemWidget(context, imageUrl, index);
      },
      itemCount: this._imageList.length,
      onPageChanged: (int index) {
        _currentIndex = index;
      },
      controller: new ExtendedPageController(initialPage: _currentIndex),
      scrollDirection: Axis.horizontal,
    );
  }

  List<dynamic> _initImageList() {
    List<dynamic> imageList = [];
    if (widget.imageList == null || widget.imageList.length == 0) {
      String initCurrentImageUrl = BaseImageUtils.getImageUrlBySize(widget.imageUrl, BaseImageSizeEnum.original, widget.type);
      imageList.add(initCurrentImageUrl);
    } else {
      imageList = widget.imageList.map((e) => BaseImageUtils.getImageUrlBySize(e, BaseImageSizeEnum.original, widget.type)).toList();
    }
    return imageList;
  }

  Widget _buildItemWidget(BuildContext context, dynamic imageUrl, int index) {
    return Container(
      padding: const EdgeInsets.all(5.0),
      child: ExtendedImage.network(imageUrl, fit: BoxFit.contain, mode: ExtendedImageMode.gesture, initGestureConfigHandler: _initGestureConfigHandler),
    );
  }

  GestureConfig _initGestureConfigHandler(ExtendedImageState state) {
    return GestureConfig(inPageView: true, initialScale: 1.0, cacheGesture: false);
  }

  /// png 图片用白底背景
  Color _getBackgroundColor() {
    if (widget.imageUrl != null && widget.imageUrl.contains(".")) {
      String _suffix = widget.imageUrl.split(".").last;
      if (_suffix.isNotEmpty && (_suffix == "png" || _suffix == "PNG")) return Colors.white;
    }
    return null;
  }
}
